<template>
    <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
    import * as echarts from 'echarts';
    import resize from './mixins/resize'

    export default {
        mixins: [resize],
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            },
            cData: {
                type: Object,
                default: null
            }
        },
        data() {
            return {
                chart: null,
                data: null,
                timer: null
            }
        },
        mounted() {
            this.initChart(this.cData);
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null;
            this.data = null;
            clearInterval(this.timer);
        },
        methods: {
            initChart(e) {
                this.chart = echarts.init(document.getElementById(this.id));
                this.data = {
                    backgroundColor: '#ffffff',
                    title: {
                        top: 10,
                        text: e.title,
                        textStyle: {
                            fontWeight: '600',
                        },
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            lineStyle: {
                                color: '#57617B'
                            }
                        }
                    },
                    legend: {
                        top: 40,
                        icon: 'rect',
                        itemWidth: 14,
                        itemHeight: 5,
                        itemGap: 13,
                        data: e.legendData,
                        right: '4%',
                        textStyle: {
                            fontSize: 12,
                            color: '#57617B'
                        }
                    },
                    grid: {
                        top: 100,
                        left: '2%',
                        right: '2%',
                        bottom: '2%',
                        containLabel: true
                    },
                    xAxis: [{
                        right:'5%',
                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            lineStyle: {
                                color: '#57617B'
                            }
                        },
                        data: e.xAxisData,
                        axisLabel: {
                          interval: 0,
                          rotate:40
                        }
                    }],
                    yAxis: [{
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#57617B'
                            }
                        },
                        axisLabel: {
                            margin: 10,
                            textStyle: {
                                fontSize: 14
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#57617B'
                            }
                        }
                    }],
                    series: e.cData
                };
                let _this = this;
                _this.chart.setOption(this.data,true);
                window.addEventListener("resize",()=>{
                    _this.chart.resize();
                });
                // _this.timer = setInterval(function() {
                //     _this.chart.setOption({}, true);
                //     _this.chart.setOption(_this.data, true);
                // }, 10000);

            }
        }
    }
</script>
